<template>
  <div>
    <div class="search-group" v-if="$slots.search">
      <slot name="search" />
    </div>
    <div class="button-group">
      <div>
        <el-button v-if="isShowBtn('add')" type="primary" @click="handleAdd">{{ addTitle }}</el-button>
        <el-button v-if="isShowBtn('edit')" type="success" @click="handleEdit" :disabled="selection.length != 1">编辑</el-button>
        <el-button v-if="isShowBtn('remove')" slot="reference" type="danger" @click="handleRemove" :disabled="selection.length != 1">删除</el-button>
        <slot name="btns" />
      </div>
      <div>
        <i class="el-icon-refresh" @click="handleRefresh" />
      </div>
    </div>
    <el-table ref="dataTable" style="width: 100%" :data="data" border header-row-class-name="table-header" v-loading="loading" @selection-change="onSelectionChange" @row-click="handleRowClick">
      <el-table-column type="selection" width="55" />
      <template v-for="column in columns">
        <el-table-column v-if="handleShowTable(column)" :key="column.key" :label="column.label">
          <template slot-scope="{row}">
            <Cell :data="formatData(row, column)" :render="formatRender(column)" />
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div style="display: flex; justify-content: space-between;">
      <div v-if="selection.length" style="height: 32px; line-height: 32px; olor: #606266; font-size: 13px;">选择{{ selection.length }}项</div>
      <div v-else />
      <el-pagination v-if="pagination.total > 10" background layout="total, prev, pager, next" :total="pagination.total" :current-page="pagination.page" @current-change="onCurrentChange" />
    </div>
    <DataModel :visible.sync="dataVisible" :data="selection[0]" :columns="columns" :is-add="isAdd" />
  </div>
</template>

<script lang="ts" src="./table.ts" />

<style lang="less" scoped>
.search-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 10px;
  box-sizing: border-box;
  color: #000;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-bottom: none;
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  color: #000;
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-bottom: none;
  i {
    cursor: pointer;
  }
}
.el-table {
  color: #000;
}
</style>

<style lang="less">
.table-header > th {
  background: #f7f7f7 !important;
  color: #000;
}
.margin-left {
  margin-left: 10px;
}
</style>
